<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>OpenLayers v8.2.0 API - Module: ol/layer/VectorTile</title>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
        crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
    <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
    <link rel="stylesheet" type="text/css" href="styles/carbon.css">
    <link rel="stylesheet" type="text/css" href="/theme/ol.css">
    <link rel="stylesheet" type="text/css" href="/theme/site.css">
</head>

<body>
    <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
        <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
                alt="">&nbsp;OpenLayers</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
            aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- menu items that get hidden below 768px width -->
        <nav class="collapse navbar-collapse" id="olmenu">
            <ul class="nav navbar-nav ms-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
                        <a class="dropdown-item" href="/doc/">Docs</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="/doc/quickstart.html"><i
                                class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
                        <a class="dropdown-item" href="/doc/faq.html"><i
                                class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
                        <a class="dropdown-item" href="/doc/tutorials/"><i
                                class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i
                                class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-sitemap me-1"></i>API
                    </a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
                        <a class="dropdown-item" href="/en/latest/apidoc/"><i
                                class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
                            (latest)</a </div>
                </li>
            </ul>
        </nav>
    </header>

    <div class="container-fluid">
        <div id="wrap" class="row">
            <div class="navigation col-md-4 col-lg-3">
                <div class="search-wrapper">
                    <div class="search">
                        <input id="search" type="text" autocomplete="off" class="form-control input-sm"
                            placeholder="Search Documentation">
                    </div>
                </div>
                <div class="navigation-list-wrapper">
                    <ul class="navigation-list search-empty">
                        <li class="item item-module toggle-manual toggle-manual-show"
                            data-longname="module:ol/layer/VectorTile" data-name="ol/layer/vectortile">
                            <span class="title toggle">
                                <span class="fa fa-plus me-2 mt-1"></span>
                                <span><a href="module-ol_layer_VectorTile.html">ol​/layer​/VectorTile</a></span>
                            </span>
                            <div class="member-list" data-type="typedefs">
                                <span class="subtitle">Typedefs</span>
                                <ul>
                                    <li data-name="options"><a
                                            href="module-ol_layer_VectorTile.html#~Options">Options</a>
                                    <li data-name="vectortilerendertype"><a
                                            href="module-ol_layer_VectorTile.html#~VectorTileRenderType">VectorTileRenderType</a>
                                </ul>
                            </div>
                        <li class="loading">Loading …
                    </ul>
                </div>
            </div>

            <div class="main col-md-8 col-lg-9">
                <h1 class="page-title" data-filename="module-ol_layer_VectorTile.html">Module: ol/layer/VectorTile</h1>
                <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
                    <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert"
                        aria-label="Close"></button>
                    This documentation is for OpenLayers v<span id="package-version">8.2.0</span>. The <a
                        id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
                </div>




                <section class="content">

                    <header>
                        <h2 class="my-3">ol/layer/VectorTile
                        </h2>
                        <br>




                        <div class="row p-3 ">
                            <!-- <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
                                <script async type="text/javascript"
                                    src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg"
                                    id="_carbonads_js"></script>
                            </div> -->

                        </div>
                    </header>

                    <article>
                        <div class="container-overview">






                            <dl class="details">





















                            </dl>




                        </div>










                        <h3 class="subsection-title">Classes</h3>

                        <dl>
                            <dt><a href="module-ol_layer_VectorTile-VectorTileLayer.html">VectorTileLayer</a></dt>
                            <dd></dd>
                        </dl>











                        <h3 class="subsection-title">Type Definitions</h3>

                        <dl>

                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~Options">
                                    </div>
                                    <h4 class="name">
                                        Options<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>className</code></td>


                                                    <td class="type">


                                                        <span class="param-type">string</span>



                                                        <br>(defaults to 'ol-layer')


                                                    </td>

                                                    <td class="description last">
                                                        <p>设置到图层元素的CSS类名。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>opacity</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 1)


                                                    </td>

                                                    <td class="description last">
                                                        <p>不透明度（0，1）。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>visible</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to true)


                                                    </td>

                                                    <td class="description last">
                                                        <p>可见。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>extent</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_extent.html#~Extent">Extent</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>图层渲染的边界范围。图层不会在此范围之外进行渲染。</p>
                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>zIndex</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>图层渲染的z-index。在渲染时，图层将按Z-index排序，然后按位置排序。当为<code>undefined</code>时,对于添加到地图的图层集合中的图层，假定
                                                            <code>zIndex</code> 为
                                                            0，而对于使<code>layers.setMap()</code>方法的图层，假定zIndex为<code>Infinity</code>。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>minResolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>此图层可见的最小分辨率（含）。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>maxResolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>此图层将可见的最大分辨率（不包括）。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>minZoom</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>此图层将可见的最小视图缩放级别（不包括）。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>maxZoom</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>此图层可见的最大视图缩放级别（包括）。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>renderOrder</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_render.html#~OrderFunction">OrderFunction</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Render order. Function to be used when sorting
                                                            features before rendering. By default features are drawn in
                                                            the order that they are created. Use
                                                            <code>null</code> to avoid the sort, but get an undefined
                                                            draw order.
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>renderBuffer</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 100)


                                                    </td>

                                                    <td class="description last">
                                                        <p>The buffer in pixels around the tile extent used by the
                                                            renderer when getting features from the vector tile for the
                                                            rendering or hit-detection.
                                                            Recommended value: Vector tiles are usually generated with a
                                                            buffer, so this value should match
                                                            the largest possible buffer of the used tiles. It should be
                                                            at least the size of the largest
                                                            point symbol or line width.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>renderMode</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_layer_VectorTile.html#~VectorTileRenderType">VectorTileRenderType</a></span>



                                                        <br>(defaults to 'hybrid')


                                                    </td>

                                                    <td class="description last">
                                                        <p>Render mode for vector tiles:</p>
                                                        <ul>
                                                            <li><code>'hybrid'</code>: Polygon and line elements are
                                                                rendered as images, so pixels are scaled during zoom
                                                                animations. Point symbols and texts are accurately
                                                                rendered as vectors and can stay upright on
                                                                rotated views.</li>
                                                            <li><code>'vector'</code>: Everything is rendered as
                                                                vectors. Use this mode for improved performance on
                                                                vector
                                                                tile layers with only a few rendered features (e.g. for
                                                                highlighting a subset of features of
                                                                another layer with the same source).</li>
                                                        </ul>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>source</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_source_VectorTile-VectorTile.html">VectorTile</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Source.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>map</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_Map-Map.html">Map</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Sets the layer as overlay on a map. The map will not manage
                                                            this layer in its layers collection, and the layer will be
                                                            rendered on top. This is useful for
                                                            temporary layers. The standard way to add a layer to a map
                                                            and have it managed by the map is to
                                                            use <a
                                                                href="module-ol_Map-Map.html#addLayer"><code>map.addLayer()</code></a>.
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>declutter</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to false)


                                                    </td>

                                                    <td class="description last">
                                                        <p>Declutter images and text. Decluttering is applied to all
                                                            image and text styles of all Vector and VectorTile layers
                                                            that have set this to <code>true</code>. The priority
                                                            is defined by the z-index of the layer, the
                                                            <code>zIndex</code> of the style and the render order of
                                                            features.
                                                            Higher z-index means higher priority. Within the same
                                                            z-index, a feature rendered before another has
                                                            higher priority.
                                                        </p>
                                                        <p>As an optimization decluttered features from layers with the
                                                            same <code>className</code> are rendered above
                                                            the fill and stroke styles of all of those layers regardless
                                                            of z-index. To opt out of this
                                                            behavior and place declutterd features with their own layer
                                                            configure the layer with a <code>className</code>
                                                            other than <code>ol-layer</code>.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>style</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_style_Style.html#~StyleLike">StyleLike</a></span>
                                                        |

                                                        <span class="param-type">null</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Layer style. When set to <code>null</code>, only
                                                            features that have their own style will be rendered. See <a
                                                                href="module-ol_style_Style-Style.html"><code>Style</code></a>
                                                            for the default style
                                                            which will be used if this is not set.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>background</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_layer_Base.html#~BackgroundColor">BackgroundColor</a></span>
                                                        |

                                                        <span class="param-type">false</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Background color for the layer. If not specified, no
                                                            background will be rendered.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>updateWhileAnimating</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to false)


                                                    </td>

                                                    <td class="description last">
                                                        <p>When set to <code>true</code>, feature batches will be
                                                            recreated during animations. This means that no vectors will
                                                            be shown clipped, but the setting
                                                            will have a performance impact for large amounts of vector
                                                            data. When set to <code>false</code>, batches
                                                            will be recreated when no animation is active.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>updateWhileInteracting</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to false)


                                                    </td>

                                                    <td class="description last">
                                                        <p>When set to <code>true</code>, feature batches will be
                                                            recreated during interactions. See also
                                                            <code>updateWhileAnimating</code>.
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>preload</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to 0)


                                                    </td>

                                                    <td class="description last">
                                                        <p>预加载。将低分辨率图块加载到<code>预加载(preload)</code>级别。
                                                            <code>0</code>表示不预加载。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>useInterimTilesOnError</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to true)


                                                    </td>

                                                    <td class="description last">
                                                        <p>在错误时使用临时图块。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>properties</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Object.&lt;string, *></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p> 任意可观察属性。可以使用<code>#get()</code> and <code>#set()</code>访问。
                                                        </p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~VectorTileRenderType">
                                    </div>
                                    <h4 class="name">
                                        VectorTileRenderType<span class="type-signature type 'hybrid'">{'hybrid'}</span>
                                        <span class="type-signature type 'vector'">{'vector'}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">





















                                </dl>



                            </dd>

                        </dl>



                    </article>

                </section>




            </div>
        </div>
    </div>
    <script>prettyPrint();</script>
    <script src="scripts/linenumber.js"></script>
    <script src="scripts/main.js"></script>
</body>

</html>